<template>
  <div class="card">
    <div class="card-header text-white bg-primary">
      Profile
    </div>
    <div class="card-body">
      <form role="form">
        <div class="form-group row">
          <label class="col-md-3 col-form-label">First Name</label>
          <div class="col-md-9">
            <input type="text" placeholder="first name" class="form-control" value.bind="contact.firstName">
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-3 col-form-label">Last Name</label>
          <div class="col-md-9">
            <input type="text" placeholder="last name" class="form-control" value.bind="contact.lastName">
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-3 col-form-label">Email</label>
          <div class="col-md-9">
            <input type="text" placeholder="email" class="form-control" value.bind="contact.email">
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-3 col-form-label">Phone Number</label>
          <div class="col-md-9">
            <input type="text" placeholder="phone number" class="form-control" value.bind="contact.phoneNumber">
          </div>
        </div>
      </form>
      <div>
        <button class="btn btn-success float-right" click.delegate="save()" disabled.bind="!canSave">Save</button>
      </div>
    </div>
  </div>
</template>
  

  
